<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业(球掉落 物理引擎)</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D Ball Drop with Matter.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
        const { Engine, Render, Runner, Bodies, Composite } = Matter;

        const engine = Engine.create();
        const { world } = engine;

        const render = Render.create({
            element: document.body,
            engine: engine,
            options: {
                width: 800,
                height: 600,
                wireframes: false
            }
        });

        const ball = Bodies.circle(400, 50, 40, {
            restitution: 0.8
        });

        const ground = Bodies.rectangle(400, 590, 810, 60, {
            isStatic: true
        });

        Composite.add(world, [ball, ground]);

        Render.run(render);
        Runner.run(engine);
    </script>
</body>
</html>
<body>
    
</body>
</html>